<template>
    <view>
        <u-navbar title="设置"></u-navbar>
        <view class="wrap">
            <view class="top">
                
            
            <view class="box" @click="showPopup()">
                    建议与反馈
                
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <view class="box" @click="goAbout()">
                关于世纪浙江
                
                <view class="right">
                    <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon>
                </view>
            </view>
            <view class="box">
                检查更新
                
                <view class="right">
                    已是最新版本
                    <!-- <u-icon size="40" name="arrow-right" color="#a0a0a0"></u-icon> -->
                </view>
            </view>
            <view class="footer" v-if="token!=''">
                <view class="button">
                    <view class="box" @click="switchAccount()">
                        <view class="title">
                            切换账号
                        </view>
                        
                    </view>
                </view>
                <view class="button">
                    <!-- <u-button @click="logout()">退出</u-button> -->
                    <view class="box" @click="logout()">
                        <view class="title">
                            退出
                        </view>
                        
                    </view>
                </view>
            </view>
            <view class="footer" v-else >
                <view class="box" @click="switchAccount()">
                    <view class="title">
                        登录
                    </view>
                    
                </view>
            </view>
            </view>
            <u-popup v-model="show" mode="center"  width="700rpx" height="400px" border-radius="40"> 
            			<view class="message">
                            <view class="m-title">
                                建议与反馈
                            </view>
                            <u-line color="black"/>
                            <view class="m-main" >
                           <u-input v-model="value" type="textarea" :border="true" :height="300" :auto-height="true" placeholder="请尽情得向我们提出意见!" maxlength="500" :placeholder-style="pstyle"/>
                            <view class="m-button">
                                <u-button type="primary" @click="onsubmit()" >提交</u-button>
                            </view>
                            
                            </view>
                        </view>
            		</u-popup>
                    <u-toast ref="uToast" />
            <!-- <u-button @click="showPopup()">打开</u-button> -->
        </view>
    </view>
</template>

<script>
    import { logout } from "@/api/login.js"
    export default {
        data() {
            return {
                background: {
                    // backgroundColor: '#ffffff',
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                userInfo: {},
                token: '',
                attentionNumber: 0,
                followNumber: 0,
                show: false,
                userInfo : {},
                forumList:[],
                value: '',
                pstyle: {
                    color: '#c0c4cc',
                }
            }
        },
        onShow() {
            console.log(uni.getStorageSync('token'))
            this.token = uni.getStorageSync('token')
            this.userInfo = uni.getStorageSync('userInfo')
            console.log(this.userInfo)
        },
        methods:{
            switchAccount(){
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            },
            logout(){
                uni.showModal({
                    title: '提示',
                    content: '确定退出该账号？',
                    success: function(res) {
                        if (res.confirm) {
                            logout().then()
                            uni.removeStorageSync('token')
                            uni.navigateTo({
                                //1为添加，2为回复
                                url: '/pages/login/index'
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            showPopup(){
               this.show = true
               // this.getForums()
            },
            onsubmit(){
                this.$refs.uToast.show({
                					title: '提交成功,感谢反馈!',
                					type: 'success',
                				})
                                this.show=false
            },
            goAbout(){
                uni.navigateTo({
                    url: '/pages/personal/aboutme/index'
                });
            }
            
        }
        }
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        min-height: calc(100vh - var(--window-top) - 44px);
        width: 100%;
        background-color: #ffffff;
        // margin-top: 80rpx;
        background-color: #f8f8f8;
    }
    .box {
        padding: 20rpx 30rpx;
        // margin-top: 30rpx;
        // margin: 5rpx 0rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        // border-radius: 20rpx;
        font-size: 35rpx;
        .right {
            float: right;
            margin: 0 10rpx 0;
            font-size: 30rpx;
            color: #999999;
            
        }
        .title {
            text-align: center;
            color: #575757;
        }
    }
    .top{
        margin-top: 30rpx;
    }
    .footer {
        margin-top: 50rpx;
        // font-size: 40px;
        .button {
            padding: 10rpx 0;
            
        }
        
    }
    .message{
        padding: 30rpx;
        // background-color: #f6f6f6;
        .m-title {
            font-size: 40rpx;
            margin-bottom: 20rpx;
            text-align: center;
        }
        .m-main {
            margin-top: 50rpx;
            .m-box {
                padding: 20rpx 30rpx;
                // margin-top: 30rpx;
                margin: 10rpx 0rpx;
                background: #fff;
                border: 3rpx solid #ddd;
                border-radius: 20rpx;
                // color: #F1F1F1;
            }
            .m-button {
                margin-top: 30rpx;
            }
        }
    }
    
</style>
